import Vue from "vue";
import VueRouter from "vue-router";
import Routers from "./router.js";
import Vuex from "vuex";
import App from "./app.vue";
import "./style.css";
import product_data from "./product.js";

Vue.use(VueRouter);
Vue.use(Vuex);
//路由配置
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title;
    next();
});

router.afterEach((to, from, next) => {
    window.scrollTo(0, 0);
});

const store = new Vuex.Store({
    state: {
        //商品列表数据
        productList: [],
        //购物车数据
        cartList: []
    },
    getters: {
        brands: state => {
            const brands = state.productList.map(item => item.brand);
            return getFilterArray(brands);
        },
        colors: state => {
            const colors = state.productList.map(item => item.color);
            return getFilterArray(colors);
        }
    },
    mutations: {
        //添加商品列表
        setProductList(state, data) {
            state.productList = data;
        },
        addCart(state, id) {
            //先判断购物车是否已有,如果有,数量+1
            const isAdded = state.cartList.find(item => item.id === id);
            if (isAdded) {
                isAdded.count++;
            } else {
                state.cartList.push({
                    id: id,
                    count: 1
                })
            }
        },
        //修改商品数量
        editCartCount(state, payload) {
            const product = state.cartList.find(item => item.id === payload.id)
            product.count += payload.count
        },
        //删除商品
        deleteCart(state, id) {
            const index = state.cartList.findIndex(item => item.id === id); //es6中的findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引,示例是将其与箭头函数连用
            state.cartList.splice(index, 1)
        },
        emptyCart(state) {
            state.cartList = [];
        }

    },
    actions: {
        //请求商品列表
        getProductList(context) {
            //真实环境通过Ajax获取,这里用异步模拟
            setTimeout(() => {
                context.commit("setProductList", product_data);
            }, 500);
        },
        buy(context) {
            return new Promise(resolve => {
                setTimeout(() => {
                    context.commit('emptyCart');
                    resolve();
                }, 500)
            })
        }
    }
});
new Vue({
    el: "#app",
    router: router,
    store: store,
    render: h => {
        return h(App);
    }
});
//数据排重
function getFilterArray(array) {
    // console.log(array)
    return [...new Set(array)];
}